﻿<!DOCTYPE html>
<html>
<head>
    <title>The with binding</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>Using the with binding!</h1>
    <p>The with binding creates a new binding context, so that descendant elements are bound in the context of a specified object.</p>

    <h2 data-bind="text: city"></h2>
    <p data-bind="with: coords">
        Latitude: <span data-bind="text: latitude"></span>,
        Longitude: <span data-bind="text: longitude"></span>
    </p>

    <div class="buttonholder">
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>

    <script type="text/javascript">
        ko.applyBindings({
            city: "London",
            coords: {
                latitude: 51.5001524,
                longitude: -0.1262362
            }
        });
    </script>


</body>
</html>
